<template>
  <!--ADMIN显示的页面-->
  <el-card v-if="role === 'ROLE_ADMIN'">
    <div class="header">
      <span>用户基本信息</span>
      <div class="flex-grow"></div>
      <el-button type="primary" v-show="!editMode" @click="loginOut" >退出登录</el-button>
    </div>
    <el-form label-width="auto"> 
        <el-form-item label="身份">管理员</el-form-item>
      </el-form>
  </el-card>
  <!--老师显示的页面-->
  <el-card v-loading="loading" v-else-if="role === 'ROLE_TEACHER'">
    <div class="header">
      <span>用户基本信息</span>
      <div class="flex-grow"></div>
      <el-button type="primary" v-show="!editMode" @click="handleEditTeacher">修改详细信息</el-button>
      <el-button type="primary" v-show="!editMode" @click="loginOut" >退出登录</el-button>
    </div>
    <el-form :model="teacherInfo" label-width="120px">
      <el-form-item label="身份">
        <span v-if="!editMode">教师</span>
        <el-input v-else disabled v-model="role"></el-input>
      </el-form-item>
      <el-form-item label="用户号">
        <span v-if="!editMode">{{ teacherInfo.uid }}</span>
        <el-input v-else disabled v-model="teacherInfo.uid"></el-input>
      </el-form-item>
      <el-form-item label="名字">
        <span v-if="!editMode">{{ teacherInfo.name }}</span>
        <el-input v-else disabled v-model="teacherInfo.tinametle"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <span v-if="!editMode">{{ teacherInfo.gender }}</span>
        <el-input v-else disabled v-model="teacherInfo.gender"></el-input>
      </el-form-item>
      <el-form-item label="出生日期">
        <span v-if="!editMode">{{ teacherInfo.birthdate }}</span>
        <el-input v-else disabled v-model="teacherInfo.birthdate"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <span v-if="!editMode">{{ teacherInfo.department }}</span>
        <el-input v-else disabled v-model="teacherInfo.department"></el-input>
      </el-form-item>
      <el-form-item label="学院">
        <span v-if="!editMode">{{ teacherInfo.school }}</span>
        <el-input v-else disabled v-model="teacherInfo.school"></el-input>
      </el-form-item>
      <el-form-item label="职称">
        <span v-if="!editMode">{{ teacherInfo.title }}</span>
        <el-input v-else disabled v-model="teacherInfo.title"></el-input>
      </el-form-item>
      <!--详细信息-->
      <el-form-item label="手机">
        <span v-if="!editMode">{{ teacherInfo.phone }}</span>
        <el-input v-else v-model="teacherEditInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <span v-if="!editMode">{{ teacherInfo.email }}</span>
        <el-input v-else v-model="teacherEditInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <span v-if="!editMode">{{ teacherInfo.address }}</span>
        <el-input v-else v-model="teacherEditInfo.address"></el-input>
      </el-form-item>
    </el-form>
    <div v-if="editMode" class="actions">
      <el-button type="primary" @click="submitTeacher">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-card>

  <!--学生显示的页面-->
    <el-card v-loading="loading" v-else-if="role === 'ROLE_STUDENT'">
    <div class="header">
      <span>用户基本信息</span>
      <div class="flex-grow"></div>
      <el-button type="primary" v-show="!editMode" @click="handleEditStudent">修改详细信息</el-button>
      <el-button type="primary" v-show="!editMode" @click="loginOut" >退出登录</el-button>
    </div>
    <el-form :model="studentInfo" label-width="120px">
      <el-form-item label="身份">
        <span v-if="!editMode">学生</span>
        <el-input v-else disabled v-model="role"></el-input>
      </el-form-item>
      <el-form-item label="用户号">
        <span v-if="!editMode">{{ studentInfo.uid }}</span>
        <el-input v-else disabled v-model="studentInfo.uid"></el-input>
      </el-form-item>
      <el-form-item label="名字">
        <span v-if="!editMode">{{ studentInfo.name }}</span>
        <el-input v-else disabled v-model="studentInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <span v-if="!editMode">{{ studentInfo.gender }}</span>
        <el-input v-else disabled v-model="studentInfo.gender"></el-input>
      </el-form-item>
      <el-form-item label="出生日期">
        <span v-if="!editMode">{{ studentInfo.birthdate }}</span>
        <el-input v-else disabled v-model="studentInfo.birthdate"></el-input>
      </el-form-item>
      <el-form-item label="教师">
        <span v-if="!editMode">{{ studentInfo.teacher }}</span>
        <el-input v-else disabled v-model="studentInfo.teacher"></el-input>
      </el-form-item>
      <el-form-item label="学院">
        <span v-if="!editMode">{{ studentInfo.school }}</span>
        <el-input v-else disabled v-model="studentInfo.school"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <span v-if="!editMode">{{ studentInfo.major }}</span>
        <el-input v-else disabled v-model="studentInfo.major"></el-input>
      </el-form-item>
      <el-form-item label="阶段">
        <span v-if="!editMode">{{ studentInfo.stage }}</span>
        <el-input v-else disabled v-model="studentInfo.stage"></el-input>
      </el-form-item>
      <el-form-item label="入学日期">
        <span v-if="!editMode">{{ studentInfo.enrollment_date }}</span>
        <el-input v-else disabled v-model="studentInfo.enrollment_date"></el-input>
      </el-form-item>

      <!--详细信息-->
      <el-form-item label="手机">
        <span v-if="!editMode">{{ studentInfo.phone }}</span>
        <el-input v-else v-model="studentEditInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <span v-if="!editMode">{{ studentInfo.email }}</span>
        <el-input v-else v-model="studentEditInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <span v-if="!editMode">{{ studentInfo.address }}</span>
        <el-input v-else v-model="studentEditInfo.address"></el-input>
      </el-form-item>
    </el-form>
    <div v-if="editMode" class="actions">
      <el-button type="primary" @click="submitStudent">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-card>


</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
import http from '@/utils/axios.js'

const router = useRouter()
const loading = ref(true)


// 身份相关
const role = localStorage.getItem("role")
const loginOut = () => {
  localStorage.removeItem('role')
  localStorage.removeItem('token')
  ElMessage.success("退出登录")
  console.log('退出登录')
  router.push('/login')
}


// 获取自己的个人信息显示在主页
const teacherInfo = reactive({});
const studentInfo = reactive({});
onMounted(() => {
  try {
    if (role === 'ROLE_STUDENT') {
      // 学生获取自己的个人信息
      studentGetHomeInfo()
    } else if (role === 'ROLE_TEACHER') {
      // 老师获取自己的个人信息
      teacherGetHomeInfo()
    } else if (role === 'ROLE_ADMIN') {
      loading.value = false
    }
  } catch (error) {
    console.error('Error fetching teacher home info:', error);
  }
});

const studentGetHomeInfo = () => {
  http.get('/api/student/student_home_info')
  .then(res => {
    console.log(res);
    Object.assign(studentInfo, res.data);
    loading.value = false
  })
}

const teacherGetHomeInfo = () => {
  http.get('/api/teacher/teacher_home_info')
  .then(res => {
    console.log(res);
    Object.assign(teacherInfo, res.data);
    loading.value = false
  })
}




// 修改自己的详细信息
const editMode = ref(false);
const cancel = () => {
  editMode.value = !editMode.value
};
// 老师修改自己的详细信息
const teacherEditInfo = reactive({});
const handleEditTeacher = () => {
  editMode.value = !editMode.value,
  teacherEditInfo.phone = teacherInfo.phone,
  teacherEditInfo.email = teacherInfo.email,
  teacherEditInfo.address = teacherInfo.address
}
const submitTeacher = async () => {
  try {
    console.log(teacherEditInfo);
    await http.patch('/api/teacher/update_personal_info', teacherEditInfo)
    .then(res => {
        console.log(res);
        if (res.status === 200) {
          res = res.data
          if (res.code === 4000) {
            ElMessage.success("更新成功");
            editMode.value = false;
            teacherGetHomeInfo()
          } else {
            ElMessage.error("更新失败");
          }
        } else {
          ElMessage.error("更新失败");
        }
    })
  } catch (error) {
    console.log(error);
    
  }

  
};
// 学生修改自己的详细信息
const studentEditInfo = reactive({});
const handleEditStudent = () => {
  editMode.value = !editMode.value,
  studentEditInfo.phone = studentInfo.phone,
  studentEditInfo.email = studentInfo.email,
  studentEditInfo.address = studentInfo.address
}
const submitStudent = async () => {
  try {
    console.log(teacherEditInfo);
    await http.patch('/api/student/update_personal_info', studentEditInfo)
    .then(res => {
        console.log(res);
        if (res.status === 200) {
          res = res.data
          if (res.code === 4000) {
            ElMessage.success("更新成功");
            editMode.value = false;
            studentGetHomeInfo()
          } else {
            ElMessage.error("更新失败");
          }
        } else {
          ElMessage.error("更新失败");
        }
    })
  } catch (error) {
    console.log(error);
    
  }
};






</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.actions {
  margin-top: 20px;
  text-align: right;
}
.flex-grow {
  flex-grow: 1;
}

</style>